import { breakpointsVuetifyV3 } from '@vueuse/core'
import { VIcon } from 'vuetify/components/VIcon'
import { defineThemeConfig } from '@core'
import { Skins } from '@core/enums'

// ❗ Logo SVG must be imported with ?raw suffix
import logo from '@images/logos.svg?raw'
import logo1 from '@images/logos1.svg?raw'
import { AppContentLayoutNav, ContentWidth, FooterType, NavbarType } from '@layouts/enums'

export const { themeConfig, layoutConfig } = defineThemeConfig({
  app: {
    title: '中招国际',
    title2: 'zzgy',
    title3: 'zgzb',
    logo_title2: '登录合同监管平台',
    logo_title3: '请登录你的账户开始使用',
    logo_title4: '请输入账户密码，注意密码安全！',
    logo_title5: '账号',
    logo_title6: '密码',
    logo_title7: '请输入',
    logo_title8: '记住我',
    logo_title9: '登录',
    logo_title10: '如果忘记密码请联系管理员！',
    Logout: '退出登入',
    navbar_title1: '欢迎使用中国机电设备招标中心合同监管平台',
    logoTitle1: '中国机电设备招标中心',
    logoTitle2: '工业和信息化部政府采购中心',

    ThemeCustomizer: '主题定制器',
    Customize_PreviewInRealTime: '实时自定义和预览',
    ThemeConfiguration: '主题配置',
    PrimaryColor: '主题色',
    Theme: '主题',
    Theme_Light: '光明主题',
    Theme_Dark: '黑暗主题',
    Theme_System: '跟随系统',
    Frame: '边框',
    Frame_Default: '阴影',
    Frame_Bordered: '边界',
    SemiDarkMenu: '半暗菜单',
    LayoutConfiguration: '布局配置',
    Layout: '布局',
    Layout_Vertical: '垂直',
    Layout_Collapsed: '倒塌',
    Layout_Horizontal: '水平',
    Content: '内容',
    Content_Compact: '袖珍',
    Content_Wide: '广泛',
    Direction: '方向',
    Direction_LeftToRight: '从左到右',
    Direction_RightToLeft: '从右到左',

    logo: h('div', { innerHTML: logo, style: 'line-height:0; color: rgb(var(--v-global-theme-primary))' }),
    logo1: h('div', { innerHTML: logo1, style: 'line-height:0; color: rgb(var(--v-global-theme-primary))' }),
    contentWidth: ContentWidth.Boxed,
    contentLayoutNav: AppContentLayoutNav.Vertical,
    overlayNavFromBreakpoint: breakpointsVuetifyV3.lg - 1, // 1 for matching with vuetify breakpoint. Docs: https://next.vuetifyjs.com/en/features/display-and-platform/
    i18n: {
      enable: true,
      defaultLocale: 'zh',
      langConfig: [
        {
          label: 'English',
          i18nLang: 'en',
          isRTL: false,
        },
        {
          label: 'French',
          i18nLang: 'fr',
          isRTL: false,
        },
        {
          label: 'Arabic',
          i18nLang: 'ar',
          isRTL: true,
        },
        {
          label: '中文简体',
          i18nLang: 'zh',
          isRTL: false,
        },
      ],
    },
    theme: 'system',
    skin: Skins.Default,
    iconRenderer: VIcon,
  },
  navbar: {
    type: NavbarType.Sticky,
    navbarBlur: true,
  },
  footer: { type: FooterType.Static },
  verticalNav: {
    isVerticalNavCollapsed: false,
    defaultNavItemIconProps: { icon: 'tabler-circle' },
    isVerticalNavSemiDark: false,
  },
  horizontalNav: {
    type: 'sticky',
    transition: 'slide-y-reverse-transition',
    popoverOffset: 6,
  },

  /*
    // ℹ️  In below Icons section, you can specify icon for each component. Also you can use other props of v-icon component like `color` and `size` for each icon.
    // Such as: chevronDown: { icon: 'tabler-chevron-down', color:'primary', size: '24' },
    */
  icons: {
    chevronDown: { icon: 'tabler-chevron-down' },
    chevronRight: { icon: 'tabler-chevron-right', size: 20 },
    close: { icon: 'tabler-x', size: 20 },
    verticalNavPinned: { icon: 'tabler-circle-dot', size: 20 },
    verticalNavUnPinned: { icon: 'tabler-circle', size: 20 },
    sectionTitlePlaceholder: { icon: 'tabler-minus' },
  },
})
